<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" href="style/base.css" type="text/css">
    <link rel="stylesheet" href="style/global.css" type="text/css">
    <link rel="stylesheet" href="style/header.css" type="text/css">
    <link rel="stylesheet" href="style/login.css" type="text/css">
    <link rel="stylesheet" href="style/footer.css" type="text/css">


</head>
<body>


<div id="app">
    <!-- 顶部导航 start -->
    <topnav_topnav></topnav_topnav>
    <!-- 顶部导航 end -->

    <div style="clear:both;"></div>

    <!-- 页面头部 start -->
    <div class="header w990 bc mt15">
        <div class="logo w990">
            <h2 class="fl"><a href="index.html"><img src="images/logo.png" alt="商城商城"></a></h2>
        </div>
    </div>
    <!-- 页面头部 end -->
    <!-- 登录主体部分start -->
    <div class="login w990 bc mt10 regist">
        <div class="login_hd">
            <h2>用户注册</h2>
            <b></b>
        </div>
        <div class="login_bd">
            <div class="login_form fl">
                <form action="" method="post">
                    <ul>
                        <li>
                            <label>用户名：</label>
                            <input type="text" class="txt" ref="name" v-model="regForm.name"/>
                            <p>3-20位字符，可由中文、字母、数字和下划线组成</p>
                        </li>
                        <li>
                            <label>密码：</label>
                            <input type="password" class="txt" ref="password" v-model="regForm.password"/>
                            <p>6-20位字符，可使用字母、数字和符号的组合，不建议使用纯数字、纯字母、纯符号</p>
                        </li>
                        <li>
                            <label>确认密码：</label>
                            <input type="password" class="txt" ref="conpassword" v-model="confirm_password"/>
                            <p><span>请再次输入密码</span></p>
                        </li>
                        <li>
                            <label>手机号码：</label>
                            <input type="text" class="txt" ref="mobile" v-model="regForm.mobile"/>
                            <input type="button" value="点击发送短信验证码" @click="sendMsg">
                        </li>
                        <li class="checkcode">
                            <label>验证码：</label>
                            <input type="text" v-model="regForm.code" ref="code"/>
                        </li>
                        <li>
                            <label>&nbsp;</label>
                            <input type="checkbox" class="chb" checked="checked"/> 我已阅读并同意《用户注册协议》
                        </li>
                        <li>
                            <label>&nbsp;</label>
                            <button class="login_btn" @click.prevent="submit"></button>
                        </li>
                    </ul>
                </form>


            </div>

            <div class="mobile fl">
                <h3>手机快速注册</h3>
                <p>中国大陆手机用户，编辑短信 “<strong>XX</strong>”发送到：</p>
                <p><strong>1069099988</strong></p>
            </div>

        </div>
    </div>
    <!-- 登录主体部分end -->

    <div style="clear:both;"></div>
    <!-- 底部版权 start -->
    <topnav_bottom></topnav_bottom>
    <!-- 底部版权 end -->
</div>

<script src="js/vue.js"></script>
<script src="js/axios-min.js"></script>
<script src="js/mock-min.js"></script>
<script src="js/api.js"></script>
<script src="js/mock.js"></script>
<script src="components/topnav.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            confirm_password: "1906600192",
            regForm: {
                name: 'yylany',
                password: '1906600192',
                mobile: '17777502615',
                code: '1111'
            }
        },
        methods: {
            // 点击注册按钮，提交表单
            submit() {
                // 表单校验
                console.log(this.regForm.name.length)
                if (this.regForm.name.length < 3 || this.regForm.name.length > 20) {
                    this.$refs.name.focus();
                    alert("昵称请重新输入")
                    return
                }
                if (this.regForm.password.length < 6 || this.regForm.password.length > 20) {
                    this.$refs.password.focus();
                    alert("密码请重新输入")
                    return
                }
                if (this.regForm.mobile.length != 11) {
                    this.$refs.mobile.focus();
                    alert("手机号码请重新输入")
                    return
                }
                if (this.regForm.code.length < 3) {
                    this.$refs.code.focus();
                    alert("验证码请重新输入")
                    return
                }
                if (this.confirm_password.length < 6 || this.confirm_password.length > 20) {
                    this.$refs.conpassword.focus();
                    alert("确认密码请重新输入")
                    return
                }

                if (this.confirm_password != this.regForm.password) {
                    this.$refs.password.focus();
                    alert("确认密码不一致")
                    return
                }

                regist(this.regForm).then(res => {
                    console.log(res)
                    if (res.data.errno == 0) {
                        console.log(res.data)
                        // alert("注册成功")
                        // 跳转至登录页面
                        location.href = "login.html"
                    } else {
                        alert(res.data.errmsg)
                    }
                })
            },
            sendMsg() {
                if (this.regForm.mobile.length != 11) {
                    this.$refs.mobile.focus();
                    alert("手机号码格式错误")
                    return
                }

                sendSms(this.regForm).then(res => {
                    console.log(res)
                    if (res.data.errno == 0) {
                        alert("发送成功")
                    } else {
                        alert(res.data.errmsg)
                    }
                })
            },
        }
    })


</script>


</body>
</html>